<template>
  <div class="app-container">
    <e-page
      ref="page"
      :data="tableData"
      :search-conf="searchConf"
      :table-conf="tableConf"
      :buttons="buttons"
      @getData="setData"
      @event="handleEvent"
    >
      <!--    查询项插槽 以search_开头-->

      <!--    表格插槽 以table_开头-->
      <template #table_gender="{row}">
        {{ row.gender | genderFormat }}
      </template>
      <template #search_org="{$model}">
        <e-org-selector v-model="$model.org" :props="{multiple: false}" clearable style="width: 80%"/>
      </template>
      <template #table_roles="{row}">
        {{ (row.roles || []).map(e => e.name).toString() }}
      </template>

      <template #buttons="{selection}">

        <el-button type="primary" size="mini" @click="insert({selection})" v-permission="'insert'">新增</el-button>
        <el-button type="danger" size="mini" @click="del({selection})" v-permission="'del'">删除</el-button>
      </template>

      <template #operation="{row}">
        <el-button type="text" size="mini" @click="edit({row})" v-permission="'edit'">修改</el-button>
        <el-button type="text" size="mini" @click="bindRole({row})" v-permission="'bindRole'">绑定角色</el-button>
        <el-button type="text" size="mini" @click="resetPassword({row})" v-permission="'resetPassword'">重置密码</el-button>


      </template>

    </e-page>
    <el-dialog v-dialog-drag :title='formTitle' :visible.sync="formVisible" append-to-body v-dialog-drag width="1000px">
      <el-row>
        <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
          <el-col :span="12">
            <el-form-item prop="username" label="登录名">
              <el-input type="text" placeholder="请输入登录名" maxlength="15" show-word-limit v-model="formData.username"
                        style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="name" label="姓名">
              <el-input type="text" placeholder="请输入姓名" maxlength="15" show-word-limit v-model="formData.name"
                        style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="gender" label="性别">
              <el-select placeholder="请输入性别" v-model="formData.gender" style="width:320px" clearable>
                <el-option
                  v-for="item in map.gender"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="email" label="用户邮箱">
              <el-input type="text" placeholder="请输入用户邮箱" v-model="formData.email" clearable style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="phone" label="手机号">
              <el-input type="text" placeholder="请输入手机号" v-model="formData.phone" clearable style="width:320px"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="birth" label="出生日期">
              <el-date-picker v-model="formData.birth" value-format="yyyy-MM-dd" type="date" placeholder="请输入出生日期"
                              style="width:320px"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="postId" label="岗位">
              <el-cascader placeholder="请输入岗位"
                           v-model="formData.postId"
                           :options="map.postTree"
                           :show-all-levels="false"
                           :props="{ value: 'id', label: 'name', checkStrictly: true,emitPath:false }"
                           clearable
                           filterable
                           style="width:320px">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <template #footer>
        <el-button type="primary" @click="formSave">保存</el-button>
        <el-button @click="formClose">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog v-dialog-drag title="详情" :visible.sync="detailVisible" direction="vertical" append-to-body width="960px">
      <el-descriptions direction="horizontal" border labelClassName="descLabel" contentClassName="descContent"
                       :column="2">
        <el-descriptions-item label="姓名">{{ detailData.name }}</el-descriptions-item>
        <el-descriptions-item label="登录名">{{ detailData.username }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ detailData.gender | genderFormat }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ detailData.email }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detailData.phone }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ detailData.birth }}</el-descriptions-item>
        <el-descriptions-item label="头像">{{ detailData.headPic }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detailData.createBy | userFormat }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createTime | dateTimeFormat }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{ detailData.updateBy | userFormat }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ detailData.updateTime | dateTimeFormat }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailClose">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog v-dialog-drag :visible.sync="roleVisible" title="绑定角色" append-to-body width="1000px">
      <el-transfer
        filterable
        v-model="role.selectedRole"
        :titles="['未绑定', '已绑定']"
        :data="role.list"
        :props="{
          key: 'id',
          label: 'name'
          }"
      >
      </el-transfer>
      <template #footer>
        <el-button @click="roleConfirm" type="primary">保存</el-button>
        <el-button @click="roleClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script src="./index.js"/>
<style scoped>
/deep/ .el-transfer-panel {
  width: 40%;
}
</style>
